<template>
  <ReportPage mode="report" v-if="props.mode == 'report'">
    <q-card
      flat
      class="my-report cardRadius q-ma-sm"
      style="min-height: 560px;background-color: #fff;"
      v-if="props.mode == 'report'"
    >
    <div style="display: flex;align-items: center;justify-content: center;font-size: 2rem;font-weight: 500;padding-top:12px;">
      Distribution of Repair Time of Various workgroup in CEWS 
      <q-select
          v-model="month"
          :options="arr"
          outlined
          dense
          style="min-width: 50px;font-size: 2rem;font-weight: 500;margin-left: 10px;margin-right: 10px;"
      ></q-select>
      {{ year }}
    </div>
      <div class="row justify-center items-center ">
        <q-card-section style="height: 468px; width: 100%">
          <v-chart class="chart" :option="option" autoresize />
        </q-card-section>
      </div>
    </q-card>
  </ReportPage>
</template>

<script setup lang="ts">
import VChart, { THEME_KEY } from 'vue-echarts';
import * as echarts from 'echarts';
import { use } from 'echarts/core';
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
import {
  PieChart,
  LineChart,
  BarChart,
  SunburstChart,
  MapChart,
} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  // SingleAxisComponent,
  ToolboxComponent,
  AxisPointerComponent,
  VisualMapComponent,
  GeoComponent,
} from 'echarts/components';
import { getWorkgroupIndex, repairingOverview } from 'src/services/reportService';
import ReportPage from 'src/pages/ReportPage.vue';
import { useInputOption } from 'src/stores/inputOptionStore';
import { ref, provide, computed, onMounted, reactive ,watch} from 'vue';
import { OutgoingRecord } from 'src/services/type';
import { formatDateTimeString } from 'src/utils/dateUtils';

const props = withDefaults(
  defineProps<{
    mode: 'report' | 'dashboard';
  }>(),
  {
    mode: 'report',
  }
);

const inputOptionStore = useInputOption();
const curMonth = new Date().getMonth() + 1;

inputOptionStore.init();
inputOptionStore.initYears(2018);

const rows = ref<OutgoingRecord[]>([]);
const latest =
  inputOptionStore.yearOptions[inputOptionStore.yearOptions.length - 1];
const year = ref(latest);
onMounted(() => {
  filteredMonthOptions();
});

const month = ref(curMonth.toString());
const monthOptions = ref([
  // { name: 'January', label: 1, disabled: false },
  // { name: 'February', label: 2, disabled: false },
  // { name: 'March', label: 3, disabled: false },
  // { name: 'April', label: 4, disabled: false },
  // { name: 'May', label: 5, disabled: false },
  // { name: 'June', label: 6, disabled: false },
  // { name: 'July', label: 7, disabled: false },
  // { name: 'August', label: 8, disabled: false },
  // { name: 'September', label: 9, disabled: false },
  // { name: 'October', label: 10, disabled: false },
  // { name: 'November', label: 11, disabled: false },
  // { name: 'December', label: 12, disabled: false },
  "1","2","3","4","5","6","7","8","9","10","11","12"
])
const arr=ref([])
function filteredMonthOptions(){
  const currentMonth = new Date().getMonth() + 1;
  for(var i=0; i <monthOptions.value.length;i++){
    if(monthOptions.value[i] <= currentMonth){
      arr.value.push(monthOptions.value[i])
    }
  }
}

watch(month, () => {
  initData()
});
const filterRows = computed(() => {
  return rows.value;
});
const posList = [
  'left',
  'right',
  'top',
  'bottom',
  'inside',
  'insideTop',
  'insideLeft',
  'insideRight',
  'insideBottom',
  'insideTopLeft',
  'insideTopRight',
  'insideBottomLeft',
  'insideBottomRight',
] as const;


let app: any = {};
app.config = {
  rotate: 90,
  align: 'left',
  verticalAlign: 'middle',
  position: 'insideBottom',
  distance: 15,
  onChange: function () {
    const labelOption: BarLabelOption = {
      rotate: app.config.rotate as BarLabelOption['rotate'],
      align: app.config.align as BarLabelOption['align'],
      verticalAlign: app.config
        .verticalAlign as BarLabelOption['verticalAlign'],
      position: app.config.position as BarLabelOption['position'],
      distance: app.config.distance as BarLabelOption['distance'],
    };
    myChart.setOption<echarts.EChartsOption>({
      series: [
        {
          label: labelOption,
        },
        {
          label: labelOption,
        },
        {
          label: labelOption,
        },
        {
          label: labelOption,
        },
      ],
    });
  },
};

type BarLabelOption = NonNullable<echarts.BarSeriesOption['label']>;


const labelOption: BarLabelOption = {
  show: true,
  position: app.config.position as BarLabelOption['position'],
  distance: app.config.distance as BarLabelOption['distance'],
  align: app.config.align as BarLabelOption['align'],
  verticalAlign: app.config.verticalAlign as BarLabelOption['verticalAlign'],
  rotate: app.config.rotate as BarLabelOption['rotate'],
  formatter: '{c}  {name|{a}}',
  fontSize: 16,
  rich: {
    name: {},
  },
};


const option = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    data: ['0 days', '1~7 days', '8~30 days', '31~60 days', '>60 days'],
    orient: 'horizontal',
    right: 0,
    bottom: 0,
  },
  toolbox: {
    show: true,
    orient: 'vertical',
    right: 0,
    top: 150,
    feature: {
      mark: { show: true },
      dataView: { show: false, readOnly: false },
      magicType: { show: false, type: ['line', 'bar', 'stack'] },
      restore: { show: false },
      saveAsImage: { show: true },
    },
  },
  grid: { containLabel: true },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: [],
      axisLabel: {
        interval: 0,
        rotate: 30, //If the label names are too long you can manage this by rotating the label.
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: '0 days',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: 'series',
      },
      data: [],
    },
    {
      name: '1~7 days',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series',
      },
      data: [],
    },
    {
      name: '8~30 days',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series',
      },
      data: [],
    },
    {
      name: '31~60 days',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series',
      },
      data: [],
    },
    {
      name: '>60 days',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series',
      },
      data: [],
    },
  ],
});


async function initData() {
  const res = await getWorkgroupIndex(year.value, month.value);
  rows.value = res.data;
  option.xAxis[0].data = res.workgroup

  for (const i in option.series) {
    option.series[i]['data'] = res[option.series[i]['name']];
  }
}
initData()

use([
  SVGRenderer,
  CanvasRenderer,
  PieChart,
  BarChart,
  LineChart,
  MapChart,
  SunburstChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
  AxisPointerComponent,
  VisualMapComponent,
  GeoComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  PieChart,
  CanvasRenderer,
]);

provide(THEME_KEY, 'light');

// const props = withDefaults(defineProps<{
//   mode: 'dashboard' | 'report'
// }>(),{
//   mode: 'report'
// })

const align = 'left';

const columns = [
  {
    name: 'id',
    label: '#',
    field: 'id',
    sortable: true,
    align,
    style: 'width: 10px',
    headerStyle: 'width: 10px',
  },
  {
    name: 'stock_code',
    label: 'Stock Code',
    field: 'stock_code',
    sortable: true,
    align,
  },
  {
    name: 'serial_no',
    label: 'Serial No',
    field: 'serial_no',
    sortable: true,
    align,
  },
  {
    name: 'system',
    label: 'System',
    field: 'system',
    sortable: true,
    align,
  },
  {
    name: 'description',
    label: 'Short Description',
    field: 'description',
    sortable: true,
    align,
  },
  {
    name: 'sw_ver',
    label: 'S/W Version',
    field: 'sw_ver',
    sortable: true,
    align,
  },

  {
    name: 'check_in',
    label: 'Check In',
    field: 'check_in',
    format: (v) => formatDateTimeString(v),
    sortable: true,
    align,
  },
  {
    name: 'check_out',
    label: 'Check Out',
    field: 'check_out',
    format: (v) => formatDateTimeString(v),
    sortable: true,
    align,
  },
  {
    name: 'duration',
    label: 'Duration',
    field: 'duration',
    sortable: true,
    align,
  },
  {
    name: 'category',
    label: 'Category',
    field: 'category',
    sortable: true,
    align,
  },
];
</script>

<style scoped>
.cardRadius {
  border-radius: 4px !important;
}
.q-ma-md {
  margin: 0 !important;
}
.q-ma-sm {
  margin: 8px 0;
}
</style>
